<template>
	<div class="content-box">
		<TreeFilter
			label="tree_name"
			id="tree_id"
			children="children"
			title="部门列表(单选)"
			:data="treeDatas"
			:default-value="treeFilterValue.departmentId"
			@change="changeTreeFilter"
		/>
		<TreeFilter
			label="tree_name"
			id="tree_id"
			children="children"
			title="部门列表(多选)"
			multiple
			:check-strictly="true"
			:data="treeDatas"
			:expand-on-click-node="false"
			:default-value="treeFilterValue1.departmentId"
			@change="changeTreeFilter1"
		/>
		<div class="descriptions-box card">
			<span class="text"> 树形筛选器 🍓🍇🍈🍉</span>
			<el-descriptions title="配置项 📚" :column="1" border>
				<el-descriptions-item label="requestApi"> 请求结构树数据的api </el-descriptions-item>
				<el-descriptions-item label="data"> 结构树数据，如果有树形数据，则不会执行 api 请求 </el-descriptions-item>
				<el-descriptions-item label="title"> 结构树标题 </el-descriptions-item>
				<el-descriptions-item label="id"> 结构树id，默认为"id" </el-descriptions-item>
				<el-descriptions-item label="label"> 结构树显示的label，默认为"label" </el-descriptions-item>
				<el-descriptions-item label="children"> 结构树子数据children，默认为"children" </el-descriptions-item>
				<el-descriptions-item label="multiple"> 是否为多选，默认为false </el-descriptions-item>
				<el-descriptions-item label="check-strictly"> 多选时，是否遵循父子不关联，默认为false：父子关联</el-descriptions-item>
				<el-descriptions-item label="defaultValue"> 默认选中的值 </el-descriptions-item>
				<el-descriptions-item label="expand-on-click-node">
					是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点
				</el-descriptions-item>
			</el-descriptions>
		</div>
	</div>
</template>

<script lang="ts" setup name="treeFilter">
import TreeFilter from "@/components/TreeFilter/index.vue";
import { reactive } from "vue";
import { ElMessage } from "element-plus";
import treeDatas from "./treeDatas.json";

// 单选
const treeFilterValue = reactive({ departmentId: "1" });
const changeTreeFilter = (val: string) => {
	ElMessage.success(`你选择了 id 为 ${val} 的数据`);
	treeFilterValue.departmentId = val;
};

// 多选
const treeFilterValue1 = reactive({ departmentId: ["11"] });
const changeTreeFilter1 = (val: string[]) => {
	ElMessage.success(`你选择了 id 为 ${JSON.stringify(val)} 的数据🤔`);
	treeFilterValue1.departmentId = val;
};
</script>

<style lang="scss" scoped>
.content-box {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	.descriptions-box {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		height: 100%;
	}
}
</style>